﻿<%@ Page Title="Bảng chữ cái - Tiếng Nhật Thật Dễ" Language="C#" MasterPageFile="~/masterpagecuatui.Master" AutoEventWireup="true" CodeBehind="Alphabets.aspx.cs" Inherits="SQT.tracnghiem.Alphabets" %>

<%@ Import Namespace="DataAccess" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="Content/css/alphabets.css" rel="stylesheet" />
    <script src="Scripts/writing.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="page-main-content w3-padding-8 w3-light-grey">
        <div class="container w3-row">
            <div class="w3-threequarter w3-padding-right">
                <ul class="w3-navbar">
                    <li><a href="javascript:;" class="apb-link w3-topbar w3-large w3-white w3-border-teal" onclick="chonbang(event, 'Hiragana'),apb_renew()">Hiragana</a></li>
                    <li><a href="javascript:;" class="apb-link w3-topbar w3-large w3-grey w3-border-grey" onclick="chonbang(event, 'Katakana'),apb_renew()">Katakana</a></li>
                    <li><a href="javascript:;" class="apb-link w3-topbar w3-large w3-grey w3-border-grey" onclick="chonbang(event, 'Practive')">Luyện tập</a></li>
                </ul>
                <div id="Hiragana" class="apb-content w3-white">
                    <%
                        for (int i = 1; i <= this.hiragana_vertical_max; i++)
                        {
                    %>
                    <div class="w3-row">
                        <%
                            int count = 0;
                            for (int z = 1; z <= 5; z++)
                            { %>
                        <div class="apb-box w3-col l2">
                            <%
                                var get_hiragana_her = new TblAlphabetController().FetchAll().Where(x => x.AlphaType == 1 && x.AlphaVertical == i && x.AlphaHerizontal == z);
                                if (get_hiragana_her.ToList().Count != 0)
                                {
                                    count++;
                            %>
                            <div class="apb-item w3-hover-light-grey" title="Chi tiết">
                                <span class="apb-jp"><%=get_hiragana_her.Single().AlphaName %></span><br />
                                <span class="apb-vn"><%=get_hiragana_her.Single().AlphaTrans %></span>
                                <span class="apb-img-src w3-hide"><%=get_hiragana_her.Single().AlphaPic %></span>
                                <span class="apb-audio-src w3-hide"><%=get_hiragana_her.Single().AlphaSnd %></span>
                            </div>
                            <%} %>
                        </div>
                        <%} %>
                        <%if (count != 0)
                            { %>
                        <div class="apb-box w3-col l2">
                            <div class="apb-speak-five-btn w3-hover-light-grey w3-hover-text-teal" title="Nghe bộ phát âm">
                                <label class="w3-hide snd_vertical"><%=i %></label>
                                <i class="fa fa-volume-up"></i>
                                <br />
                                <i class="fa fa-long-arrow-right"></i>
                            </div>
                        </div>
                        <%}
                            else
                            {%>
                        <div class="apb-box w3-col l2">
                            <div class="apb-not-speak-five-btn" title="Chưa có chữ cái nào để nghe">
                                <i class="fa fa-volume-off"></i>
                                <br />
                                <i class="fa fa-long-arrow-right"></i>
                            </div>
                        </div>
                        <%} %>
                    </div>
                    <%} %>
                </div>
                <div id="Katakana" class="apb-content apb-katakana w3-white">
                    <%
                        for (int i = 1; i <= this.katakana_vertical_max; i++)
                        {
                    %>
                    <div class="w3-row">
                        <%
                            int count = 0;
                            for (int z = 1; z <= 5; z++)
                            { %>
                        <div class="apb-box w3-col l2">
                            <%
                                var get_hiragana_her = new TblAlphabetController().FetchAll().Where(x => x.AlphaType == 2 && x.AlphaVertical == i && x.AlphaHerizontal == z);
                                if (get_hiragana_her.ToList().Count != 0)
                                {
                                    count++;
                            %>
                            <div class="apb-item w3-hover-light-grey" title="Chi tiết">
                                <span class="apb-jp"><%=get_hiragana_her.Single().AlphaName %></span><br />
                                <span class="apb-vn"><%=get_hiragana_her.Single().AlphaTrans %></span>
                                <span class="apb-img-src w3-hide"><%=get_hiragana_her.Single().AlphaPic %></span>
                                <span class="apb-audio-src w3-hide"><%=get_hiragana_her.Single().AlphaSnd %></span>
                            </div>
                            <%} %>
                        </div>
                        <%} %>
                        <%if (count != 0)
                            { %>
                        <div class="apb-box w3-col l1">
                            <div class="apb-speak-five-btn w3-hover-light-grey w3-hover-text-teal" title="Nghe bộ phát âm">
                                <label class="w3-hide snd_vertical"><%=i %></label>
                                <i class="fa fa-volume-up"></i>
                                <br />
                                <i class="fa fa-long-arrow-right"></i>
                            </div>
                        </div>
                        <%}
                            else
                            {%>
                        <div class="apb-box w3-col l1">
                            <div class="apb-not-speak-five-btn" title="Chưa có chữ cái nào để nghe">
                                <i class="fa fa-volume-up"></i>
                                <br />
                                <i class="fa fa-long-arrow-right"></i>
                            </div>
                        </div>
                        <%} %>
                    </div>
                    <%} %>
                </div>
                <div id="Practive" class="apb-content apb-practive w3-white">
                    <div id="apb-practive-slide" class="apb-practive-slide carousel slide w3-display-container" data-ride="carousel">
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <div class="apb-practive-question">Chọn bảng chữ cái muốn luyện tập</div>
                                <div class="w3-row">
                                    <div class="apb-practive-btn-box w3-center">
                                        <a class="apb-practive-btn w3-btn w3-blue" href="#apb-practive-slide" role="button" data-slide="next">Hiragana</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a class="apb-practive-btn w3-btn w3-indigo" href="#apb-practive-slide" role="button" data-slide="next">Katakana</a>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="apb-practive-question">Bấm vào nút bên dưới để kiểm tra thiết bị nghe</div>
                                <div class="w3-padding-4 w3-center">
                                    <a onclick="apb_check_sound(this)" class="apb-check-sound-btn w3-btn w3-teal"><i class="fa fa-volume-up"></i><span class="apb-check-sound-src" hidden="hidden">/Content/effect/correctanswer.mp3</span></a>
                                    <audio id="apb-check-sound-audio" hidden="hidden"></audio>
                                </div>
                                <div class="apb-check-sound-done">
                                    <div class="apb-practive-question">Bạn có nghe được âm thanh không ?</div>
                                    <div class="w3-padding-12 w3-center">
                                        <a onclick="apb_practive_start()" href="#apb-practive-slide" role="button" data-slide="next" class="apb-check-sound-btn w3-btn w3-teal">Có</a>
                                        <a href="#apb-practive-slide" role="button" data-slide="prev" class="apb-check-sound-btn w3-btn w3-teal">Không</a>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="apb-practive-question">Chữ <span class="apb-practive-value w3-text-blue">あ</span> có phiên âm là gì ?</div>
                                <div class="w3-row">
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue apb-right-answer">a</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue">i</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue">u</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue">e</a>
                                    </div>
                                </div>
                                <div class="w3-center w3-padding-16">
                                    <button onclick="apb_check_answer()" class="apb-practive-check-btn w3-btn w3-blue" disabled="disabled">Kiểm tra</button>
                                    <a onclick="apb_next_question()" class="apb-next-question-btn w3-btn w3-blue" href="#apb-practive-slide" role="button" data-slide="next">Tiếp theo</a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="apb-practive-question">Chữ <span class="apb-practive-value w3-text-blue">い</span> có phát âm như thế nào ?</div>
                                <div class="w3-row">
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn apb-choose-speak-btn w3-btn w3-blue"><i class="fa fa-volume-up"></i><span class="apb-practive-speak-src" hidden="hidden">/Content/effect/a.mp3</span></a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn apb-choose-speak-btn w3-btn w3-blue apb-right-answer"><i class="fa fa-volume-up"></i><span class="apb-practive-speak-src" hidden="hidden">/Content/effect/i.mp3</span></a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn apb-choose-speak-btn w3-btn w3-blue"><i class="fa fa-volume-up"></i><span class="apb-practive-speak-src" hidden="hidden">/Content/effect/u.mp3</span></a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn apb-choose-speak-btn w3-btn w3-blue"><i class="fa fa-volume-up"></i><span class="apb-practive-speak-src" hidden="hidden">/Content/effect/e.mp3</span></a>
                                    </div>
                                </div>
                                <div class="w3-center w3-padding-16">
                                    <button onclick="apb_check_answer()" class="apb-practive-check-btn w3-btn w3-blue" disabled="disabled">Kiểm tra</button>
                                    <a onclick="apb_next_question()" class="apb-next-question-btn w3-btn w3-blue" href="#apb-practive-slide" role="button" data-slide="next">Tiếp theo</a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="apb-practive-question">Chữ <span class="apb-practive-value w3-text-blue">う</span> có phiên âm như thế nào ?</div>
                                <div class="w3-row">
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue">a</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue">i</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue apb-right-answer">u</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue">e</a>
                                    </div>
                                </div>
                                <div class="w3-center w3-padding-16">
                                    <button onclick="apb_check_answer()" class="apb-practive-check-btn w3-btn w3-blue" disabled="disabled">Kiểm tra</button>
                                    <a onclick="apb_next_question()" class="apb-next-question-btn w3-btn w3-blue" href="#apb-practive-slide" role="button" data-slide="next">Tiếp theo</a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="apb-practive-question">Chữ <span class="apb-practive-value w3-text-blue">え</span> có phát âm như thế nào ?</div>
                                <div class="w3-row">
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn apb-choose-speak-btn w3-btn w3-blue"><i class="fa fa-volume-up"></i><span class="apb-practive-speak-src" hidden="hidden">/Content/effect/a.mp3</span></a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn apb-choose-speak-btn w3-btn w3-blue"><i class="fa fa-volume-up"></i><span class="apb-practive-speak-src" hidden="hidden">/Content/effect/i.mp3</span></a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn apb-choose-speak-btn w3-btn w3-blue"><i class="fa fa-volume-up"></i><span class="apb-practive-speak-src" hidden="hidden">/Content/effect/u.mp3</span></a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn apb-choose-speak-btn w3-btn w3-blue apb-right-answer"><i class="fa fa-volume-up"></i><span class="apb-practive-speak-src" hidden="hidden">/Content/effect/e.mp3</span></a>
                                    </div>
                                </div>
                                <div class="w3-center w3-padding-16">
                                    <button onclick="apb_check_answer()" class="apb-practive-check-btn w3-btn w3-blue" disabled="disabled">Kiểm tra</button>
                                    <a onclick="apb_next_question()" class="apb-next-question-btn w3-btn w3-blue" href="#apb-practive-slide" role="button" data-slide="next">Tiếp theo</a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="apb-practive-question">Chữ <span class="apb-practive-value w3-text-blue">お</span> có phiên âm như thế nào ?</div>
                                <div class="w3-row">
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue">0</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue">ô</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue apb-right-answer">o</a>
                                    </div>
                                    <div class="apb-practive-btn-box w3-center">
                                        <a onclick="apb_choose_answer(this)" class="apb-choose-btn w3-btn w3-blue">Oh</a>
                                    </div>
                                </div>
                                <div class="w3-center w3-padding-16">
                                    <button onclick="apb_check_answer()" class="apb-practive-check-btn w3-btn w3-blue" disabled="disabled">Kiểm tra</button>
                                    <a onclick="apb_next_question()" class="apb-next-question-btn w3-btn w3-blue" href="#apb-practive-slide" role="button" data-slide="next">Tiếp theo</a>
                                </div>
                            </div>
                        </div>
                        <div id="apb-congratulation" class="apb-congratulation w3-hide w3-center">
                            <div id="apb-congratulation-text" class="fadeInUp animated w3-xlarge w3-padding-4">
                            </div>
                            <div id="apb-earned-stars" class="w3-xlarge w3-padding-4"><i class="bounceIn animated apb-earned-star fa fa-star w3-text-light-grey"></i>&nbsp;<i class="bounceIn animated apb-earned-star fa fa-star w3-text-light-grey"></i>&nbsp;<i class="bounceIn animated apb-earned-star fa fa-star w3-text-light-grey"></i>&nbsp;<i class="bounceIn animated apb-earned-star fa fa-star w3-text-light-grey"></i>&nbsp;<i class="bounceIn animated apb-earned-star fa fa-star w3-text-light-grey"></i></div>
                            <div id="apb-advice-text" class="fadeInUp animated w3-large w3-padding-4"></div>
                            <div class="w3-padding-4">
                                <%
                                    if (Session["user"] != null)
                                    {
                                        var get_name = new TblUserController().FetchAll().Where(x => x.UserName.ToLower() == Session["user"].ToString().ToLower()).Single();
                                %>
                                <a onclick="apb_renew()" class="bounceIn animated apb-renew-btn w3-btn w3-teal" data-target="#apb-practive-slide" data-slide-to="0">Hoàn thành</a>
                                <%}
                                    else
                                    { %>
                                <a onclick="authentication()" class="bounceIn animated apb-renew-btn w3-btn w3-teal">Tạo tài khoản</a>
                                <a onclick="apb_renew()" class="bounceIn animated apb-renew-btn w3-btn w3-teal" data-target="#apb-practive-slide" data-slide-to="0">Hoàn thành</a>
                                <%} %>
                            </div>
                        </div>
                        <div id="apb-practive-progress" class="apb-practive-progress w3-display-bottommiddle w3-grey w3-display-container">
                            <div id="apb-right-answer-bar" class="apb-right-answer-bar w3-teal w3-padding-8">&nbsp;</div>
                            <div class="w3-center w3-text-white w3-padding-8 w3-display-bottommiddle"><span id="apb-right-answer-number">0</span>/<span id="apb-max-answer-number">5</span></div>
                        </div>
                        <audio hidden="hidden" id="apb-practive-audio"></audio>
                    </div>
                </div>
            </div>

            <div class="apb-detail w3-quarter w3-white w3-topbar w3-border-teal">
                <div id="apb-tutorial-text" class="apb-tutorial-text w3-border w3-border-light-grey w3-center">
                    <p>Bấm vào chữ để xem cách viết</p>
                    <i class="fa fa-language w3-xxxlarge"></i>
                </div>
                <div id="apb-detail-content" class="apb-detail-content">
                    <div class="w3-row w3-padding-4">
                        <span class="apb-title-text w3-third">Phát âm</span>
                        <div class="w3-center w3-third">
                            <i id="apb-speak-btn" class="apb-speak-btn fa fa-volume-up" title="Bấm vào chữ để nghe phát âm"></i>
                        </div>
                        <audio src="" id="apb-audio" class="w3-hide" />
                    </div>
                    <div class="w3-row w3-padding-4">
                        <span class="apb-title-text w3-third">Phiên âm</span>
                        <span id="apb-trans" class="apb-trans w3-center w3-third"></span>
                    </div>
                    <div class="w3-row w3-padding-4">
                        <span class="apb-title-text w3-third">Cách viết</span>
                        <div class="w3-third w3-center">
                            <i class="apb-rewriting-btn fa fa-repeat w3-hover-text-teal" title="Viết lại"></i>
                        </div>
                    </div>
                    <div class="apb-writing-view">
                        <%--<img id="apb-img" src="" alt="apb image" class="apb-img" />--%>
                    </div>
                    <div class="w3-row w3-padding-4">
                        <span class="apb-title-text w3-third">Tập viết</span>
                        <div class="w3-third w3-center">
                            <i class="apb-redraw-btn fa fa-refresh w3-hover-text-teal" title="Làm mới"></i>
                        </div>
                    </div>
                    <div class="apb-drawing-box w3-light-grey">
                        <canvas id="apb-drawing" height="230" width="270" class="apb-drawing"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="Scripts/alphabets.js"></script>
</asp:Content>
